<template>
  <a-layout style="min-height: 100vh; display: flex;">
    <!-- 左侧导航栏 -->
    <a-layout-sider width="200" theme="dark" style="position: fixed; height: 100%; top: 0; left: 0;">
      <div class="logo">管理员后台</div>
      <a-menu
        mode="inline"
        theme="dark"
        :selectedKeys="selectedKeys"
        @select="handleMenuSelect"
        style="height: calc(100% - 64px); overflow-y: auto;"
      >
        <a-menu-item key="home">
          <template #icon>
            <i class="arco-icon arco-icon-user"></i>
          </template>
          主页
        </a-menu-item>
        <a-menu-item key="userRoleManagement">
          <template #icon>
            <i class="arco-icon arco-icon-user"></i>
          </template>
          用户管理
        </a-menu-item>
        <a-menu-item key="labelOne">
          <template #icon>
            <i class="arco-icon arco-icon-book"></i>
          </template>
          标签1
        </a-menu-item>
        <a-menu-item key="labelTwo">
          <template #icon>
            <i class="arco-icon arco-icon-group"></i>
          </template>
          标签2
        </a-menu-item>
<!--        <a-menu-item key="noteManagement">-->
<!--          <template #icon>-->
<!--            <i class="arco-icon arco-icon-book"></i>-->
<!--          </template>-->
<!--          笔记管理-->
<!--        </a-menu-item>-->
        <a-menu-item key="topicManagement">
          <template #icon>
            <i class="arco-icon arco-icon-group"></i>
          </template>
          话题管理
        </a-menu-item>
        <a-menu-item key="postManagement">
          <template #icon>
            <i class="arco-icon arco-icon-group"></i>
          </template>
          帖子管理
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <!-- 右侧内容区域 -->
    <a-layout style="margin-left: 200px;">
      <a-layout-header style="background: #fff; padding: 0 20px; position: fixed; width: calc(100% - 200px); z-index: 1000; display: flex; justify-content: space-between; align-items: center;">
        <h1>管理员主页</h1>
        <!-- 用户信息区域 -->
        <div class="user-info">
          <a-dropdown>
            <ASpace>
              <a-avatar :src="loginUserStore.loginUser.userAvatar" size="large" />
              <span class="user-name">{{ loginUserStore.loginUser.userName }}</span>
            </ASpace>
            <template #overlay>
              <a-menu>
                <a-menu-item @click="toPersonCenter">
                  <LogoutOutlined />
                  个人中心
                </a-menu-item>
                <a-menu-item @click="toUpdatePassword">
                  <LogoutOutlined />
                  修改密码
                </a-menu-item>
                <a-menu-item @click="doLogout">
                  <LogoutOutlined />
                  退出登录
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </a-layout-header>
      <a-layout-content style="padding: 80px 20px 20px;">
        <!-- 右侧内容上半部分 -->
        <div class="content-top">
          <!-- 面包屑导航 -->
          <a-breadcrumb>
            <a-breadcrumb-item>管理员后台</a-breadcrumb-item>
            <a-breadcrumb-item v-if="selectedKeys[0] === 'home'">主页</a-breadcrumb-item>
            <a-breadcrumb-item v-if="selectedKeys[0] === 'userRoleManagement'">用户角色管理</a-breadcrumb-item>
            <a-breadcrumb-item v-if="selectedKeys[0] === 'labelOne'">标签1</a-breadcrumb-item>
            <a-breadcrumb-item v-if="selectedKeys[0] === 'labelTwo'">标签2</a-breadcrumb-item>
            <a-breadcrumb-item v-if="selectedKeys[0] === 'noteManagement'">笔记管理</a-breadcrumb-item>
            <a-breadcrumb-item v-if="selectedKeys[0] === 'topicManagement'">话题管理</a-breadcrumb-item>
            <a-breadcrumb-item v-if="selectedKeys[0] === 'postManagement'">帖子管理</a-breadcrumb-item>
          </a-breadcrumb>
        </div>
        <!-- 根据选中的导航项显示不同内容 -->
        <template v-if="selectedKeys[0] === 'home'">
          <Home />
        </template>
        <template v-if="selectedKeys[0] === 'userRoleManagement'">
          <UserRoleManagement />
        </template>
        <template v-if="selectedKeys[0] === 'labelOne'">
          <CourseManagement />
        </template>
        <template v-if="selectedKeys[0] === 'labelTwo'">
          <ClassManagement />
        </template>
        <template v-if="selectedKeys[0] === 'noteManagement'">
          <NoteManagement />
        </template>
        <template v-if="selectedKeys[0] === 'topicManagement'">
          <TopicManagement />
        </template>
        <template v-if="selectedKeys[0] === 'postManagement'">
          <PostManagement />
        </template>
        <template v-if="selectedKeys[0] === 'personCenter'">
          <PersonCenterPage/>
        </template>
        <template v-if="selectedKeys[0] === 'updatePassword'">
          <UpdatePasswordPage/>
        </template>
      </a-layout-content>
      <a-layout-footer style="text-align: center; margin-top: 20px;">
        Copyright © 2024 管理员后台
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import UserRoleManagement from './UserManagement.vue';
import NoteManagement from './NoteManagement.vue';
import ClassManagement from './TopicManagement.vue';
import { useLoginUserStore } from '@/stores/useLoginUserStore'
import router from '@/router'
import PersonCenterPage from '@/views/personCenterPage.vue'
import UpdatePasswordPage from '@/views/updatePasswordPage.vue'
import { userLogoutUsingPost } from '@/api/userController'
import { message } from 'ant-design-vue'
import Home from "@/views/admin/Home.vue";
import TopicManagement from "@/views/admin/TopicManagement.vue";
import PostManagement from "@/views/admin/PostManagement.vue";

// 选中的导航项
const selectedKeys = ref<string[]>(['home']);
// 用户名称
const loginUserStore = useLoginUserStore()
loginUserStore.fetchLoginUser()

// 处理导航项选择事件
const handleMenuSelect = (e: { key: string }) => {
  selectedKeys.value = [e.key];
};

const toPersonCenter = () => {
  selectedKeys.value[0] = "personCenter"
}

const toUpdatePassword = () => {
  selectedKeys.value[0] = "updatePassword"
}

// 用户注销
const doLogout = async () => {
  const res = await userLogoutUsingPost()
  console.log(res)
  if (res.data.code === 0) {
    loginUserStore.setLoginUser({
      username: '未登录',
    })
    message.success('退出登录成功')
    await router.push('/')
  } else {
    message.error('退出登录失败，' + res.data.message)
  }
}
</script>

<style scoped>
.logo {
  height: 64px;
  line-height: 64px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  background: rgba(255, 255, 255, 0.1);
}

.content-top {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-name {
  margin: 0 8px;
  font-weight: bold;
}
</style>
